<template>
	<view class="content">
		<view class="top">
			<text>您好,</br>欢迎使用小格社区</text>
		</view>
		<view class="form">
			<view class="item">
				<text>用户名</text>
				<u--input placeholder="请输入手机号" border="surround" v-model="username"></u--input>
			</view>
			<view class="item">
				<text>验证码</text>
				<u--input placeholder="请输入验证码" v-model="code">

					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
					</template>

				</u--input>
			</view>
			<u-button type="primary" shape="circle" text="注册" :disabled="disabled" @click="reg"></u-button>



			<view class="login">
				<text>已有帐号？<text class="to_login" @click="to_login">立即登录</text> </text>
			</view>
			<view class="footer">
				<!-- <u-checkbox  ></u-checkbox> -->
				<text @click="lock" v-show="checked" class="iconfont icon-31xuanzhong" style="color: #3DA7FB;"></text>
				<text @click="lock" v-show="!checked" class="iconfont icon-weixuanzhong"></text>
				<text @click="lock">我已详细阅读《小格社区用户协议》</text>



			</view>
		</view>
	</view>

</template>

<script>

import {
		getRregister,
		getSms
	} from "../../api/user.js"
	export default {
		data() {
			return {
				username: '',
				password: '',
				tips: '',
				code: '',
				disabled: false,
				checked: false,
			}
		},
		onLoad() {

		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.$u.toast('验证码已发送');
					this.$refs.uCode.start();
					getSms({
						mobile: this.username
					}).then(res => {
						if (res.code ==200) {
							this.code = res.data
							console.log(this.code)
						}
					})

				}
				else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			reg() {
				this.disabled = true
				let {
					checked,
					username,
					password
				} = this
				if (!checked) {
					this.disabled = false
					uni.showToast({
						title: '请同意以下协议',
						icon: "none"
					});
					return
				}
				if (username.trim().length == 0 || password.trim().length == 0) {
					uni.showToast({
						title: '请输入正确的用户名或密码',
						icon: "none"
					})
					this.disabled = false
					return
				}

				getRregister({
					username,
					password
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
						let {id}=res.data
						this.$store.commit('users/GET_ID',id)
						uni.setStorage({
							key: 'id',
							data: id
						
						});
						this.disabled = false
						username = ''
						password: ''
					} else {
						this.disabled = false
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				})



			},
			to_login() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			lock() {
				this.checked = !this.checked

				console.log(this.checked)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 750rpx;
		height: 100%;
		background: linear-gradient(to right, rgb(22, 136, 251), rgb(61, 167, 251));
		position: relative;
		box-sizing: border-box;

		.top {
			padding: 50rpx;
			// padding-bottom: 100rpx;
			color: #fff;
			font-size: 18px;
			font-weight: 400;
			line-height: 2;
		}

		.form {
			border-top-left-radius: 80rpx;
			border-top-right-radius: 80rpx;
			width: 750rpx;
			height: calc(100vh - 284rpx);
			background-color: #fff;
			box-sizing: border-box;
			padding: 50rpx;

			.item {
				box-sizing: border-box;
				margin-top: 20rpx;

				text {
					font-size: 14px;
					font-weight: 500;
				}
			}

			.login {
				margin-top: 40rpx;
				text-align: center;

				.to_login {
					color: rgb(61, 167, 251);
				}
			}

			.footer {
				margin-top: 200rpx;
				box-sizing: border-box;
				width: 100%;
				font-size: 12px;
				color: #A7A5A5;
				display: flex;
				justify-content: center;
			}

		}
	}

	.u-input--radius[data-v-113bc24f],
	.u-input--square[data-v-113bc24f] {
		margin-top: 18rpx;
		padding: 0 !important;
		border: none;
	}

	.input-placeholder {
		font-size: 14px;
	}

	.u-button--circle[data-v-2bf0e569] {
		margin-top: 50rpx;
	}
</style>
